<template>
  <div>
    <el-tabs v-model="tab">
      <el-tab-pane label="检测内容" name="first">
        <el-form label-width="85px" :model="queryParams" ref="queryRef">
          <el-row>
            <el-col :span="3" style="line-height: 2">
              <span class="pinformation">检测内容列表</span>
              <span class="totalStyle">共 {{ total }} 条数据</span>
            </el-col>
            <el-col :span="21">
              <el-row>
                <el-col :span="4">
                  <el-form-item label="检测类别：" prop="jclbId">
                    <el-select v-model="queryParams.jclbId" clearable>
                      <el-option v-for="item in proxy.addListNoLimit(
                        jclbList,
                        'jclbId',
                        'jclbName'
                      )" :key="item.jclbId" :value="item.jclbId" :label="item.jclbName" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="检测项目：" prop="jcxmName">
                    <el-input v-model="queryParams.jcxmName" clearable maxlength="100"
                      @keyup.enter="handeleQuery"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="方法编号：" prop="methodCode">
                    <el-input v-model="queryParams.methodCode" clearable maxlength="100"
                      @keyup.enter="handeleQuery"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="点位名称：" prop="pointName">
                    <el-input v-model="queryParams.pointName" clearable maxlength="100"
                      @keyup.enter="handeleQuery"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item label="分包：" prop="isPackage">
                    <el-select v-model="queryParams.isPackage" clearable>
                      <el-option v-for="item in pageList" :key="item.value" :value="item.value" :label="item.label" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="3">
                  <el-row justify="end">
                    <el-button type="success" @click="handeleQuery">搜索</el-button>
                    <el-button class="business resetBtn" @click="resetQuery">重置</el-button>
                  </el-row>
                </el-col>
                <!-- <el-col :span="1">
              <el-row justify="end">
                <el-button type="success" @click="save" v-if="props.isdisabel"
                  >保存</el-button
                >
              </el-row>
            </el-col> -->
              </el-row>
            </el-col>
          </el-row>
        </el-form>
        <el-table v-loading="loading" ref="mainTableRef" :data="contentList">
          <el-table-column show-overflow-tooltip label="检测类别" align="center" prop="projectPoint.jclbName" width="120"
            fixed />

          <el-table-column show-overflow-tooltip label="点位名称" align="center" prop="projectPoint.pointName" width="150"
            fixed />
          <el-table-column show-overflow-tooltip label="点位编号" align="center" prop="projectPoint.pointCode" width="150"
            fixed />
          <el-table-column show-overflow-tooltip label="检测项目" align="center" prop="jcxmName" width="150" fixed>
            <template #default="scope">
              <span v-html="proxy.getSupAndSub(scope.row.jcxmName)"></span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="连测天数" align="center" prop="sampleDay" width="80" />
          <el-table-column show-overflow-tooltip label="每天频次" align="center" prop="sampleCount" width="80" />
          <el-table-column show-overflow-tooltip label="方法编号" align="center" width="250">
            <template #default="scope">
              <el-select v-if="props.isdisabel" v-model="scope.row.methodJcxm.methodCode"
                @click="methodCodeClick(scope.row)" @change="methodCodeChange(scope.row, scope.$index, true)">
                <el-option v-for="item in getProjectCodeList" :key="item.mJId" :value="item.mJId"
                  :label="item.methodCode">
                  <el-tooltip class="box-item" effect="customized" placement="right" :content="item.methodCode">
                    <div style="
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  ">
                      {{ item.jclbName }} {{ item.methodCode }}
                    </div>
                  </el-tooltip>
                </el-option>
              </el-select>
              <div v-if="!props.isdisabel">
                {{ scope.row.methodJcxm.methodCode }}
              </div>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="方法名称" align="center" prop="methodJcxm.methodName" width="400" />
          <el-table-column show-overflow-tooltip label="特别说明" align="center" width="200" />
          <el-table-column show-overflow-tooltip label="分包公司" align="center" prop="packageName" width="200" />
          <el-table-column show-overflow-tooltip label="是否分包" align="center" width="80">
            <template #default="scope">
              <span v-if="scope.row.isPackage == 0">否</span>
              <span v-else>是</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="评价下限" align="center" prop="pjDownLimit" width="120">
            <template #default="scope">
              <el-input v-if="props.isdisabel" v-model="scope.row.pjDownLimit" clearable
                @change="methodCodeChange(scope.row, scope.$index, false)"></el-input>
              <div v-if="!props.isdisabel">{{ scope.row.pjDownLimit }}</div>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="评价上限" align="center" prop="pjUpLimit" width="120">
            <template #default="scope">
              <el-input v-if="props.isdisabel" v-model="scope.row.pjUpLimit" clearable
                @change="methodCodeChange(scope.row, scope.$index, false)"></el-input>
              <div v-if="!props.isdisabel">{{ scope.row.pjUpLimit }}</div>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="评价单位" align="center" prop="pjUnit" width="120">
            <template #default="scope">
              <el-select v-if="props.isdisabel" v-model="scope.row.pjUnit" filterable
                @change="methodCodeChange(scope.row, scope.$index, false)">
                <el-option v-for="item in unit" :key="item.unitId" :value="item.unitId" :label="item.unitName">
                  <span style="float: left" v-html="proxy.getSupAndSub(item.unitName)"></span>
                </el-option>
              </el-select>
              <div v-if="!props.isdisabel">{{ scope.row.pjUnit }}</div>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="评价标准" align="center" width="120" />
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" @pagination="handeleQuery" />
      </el-tab-pane>
      <el-tab-pane label="基本信息" name="second">
        <p class="pinformation" style="margin-top: 7px">基本信息</p>
        <el-form label-width="100px" :model="form">
          <el-row>
            <el-col :span="6">
              <el-form-item label="方案编号：">{{ form.projectCode }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方案名称：">{{ form.projectName }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同编号：">{{
                form.contractCode
              }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属合同名称：">{{
                form.contractName
              }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="方案类型：">
                <dict-tag :options="sys_contract_type" :value="form.contractType" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="协商条款：">{{
                getItemByArrays(sys_xstk_type, "value", form.xstks, "label")
              }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="样品来源：">
                <dict-tag :options="sys_sample_source" :value="form.sampleSource" />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="检后样品处置：">
                <dict-tag :options="sys_sample_handle" :value="form.sampleAfter" />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="紧急类型：">
                <dict-tag :options="sys_degree" :value="form.degree" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="委托日期：">{{ form.beginDate }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="希望采样时间 - 预定取报告时间：" label-width="220">
                <el-date-picker v-if="props.isdisabel" v-model="form.time" value-format="YYYY-MM-DD" type="daterange"
                  :clearable="false" :editable="false" range-separator="-" start-placeholder="开始日期"
                  end-placeholder="结束日期"></el-date-picker>
                <div v-if="!props.isdisabel">
                  {{ form.planDate + "-" + form.endTime }}
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="2" style="line-height: 2">
              <el-button type="success" style="margin-left: 10px" @click="timeSave" v-if="props.isdisabel">保存</el-button>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方案当前状态：">
                <dict-tag :options="sys_project_step" :value="form.stepId" />
              </el-form-item>
            </el-col>
          </el-row>
          <p class="pinformation" style="margin-top: 7px">委托单位信息</p>
          <el-row>
            <el-col :span="6">
              <el-form-item label="委托单位名称：">{{
                form.wtCustomName
              }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="委托单位地址：">{{
                form.wtAddress
              }}</el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="联系人：">{{ form.wtContacts }}</el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="联系电话：">{{
                form.wtPhonenumber
              }}</el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label="报告领取方式：">
                <dict-tag :options="sys_report_type" :value="form.wtReportType" />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="电子邮箱：">{{ form.wtEmail }}</el-form-item>
            </el-col>
          </el-row>
          <p class="pinformation" style="margin-top: 7px">受检单位信息</p>
          <el-row>
            <el-col :span="6">
              <el-form-item label="受检单位名称：">{{
                form.sjCustomName
              }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="受检单位地址：">{{
                form.sjAddress
              }}</el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="联系人：">{{ form.sjContacts }}</el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="联系电话：">{{
                form.sjPhonenumber
              }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import {
  getProjectForm,
  getProjectJcxmList,
  addProjectJcxmList,
  addEiditProject,
  batchReview,
  getSign,
} from "@/api/project/projectCheck";
import { getCurrentTime } from "@/api/common";
import { listRightPackage1 } from "@/api/store/package";
import { nextTick } from "vue";
const tab = ref("first");
const { proxy } = getCurrentInstance();
const {
  sys_degree,
  sys_report_type,
  sys_sample_source,
  sys_xstk_type,
  sys_sample_handle,
  sys_project_step,
} = proxy.useDict(
  "sys_degree",
  "sys_report_type",
  "sys_sample_source",
  "sys_xstk_type",
  "sys_sample_handle",
  "sys_project_step"
);
const {
  sys_contract_type,
} = proxy.useOrgDict(
  "sys_contract_type",
);
const pageList = ref([
  { value: -1, label: "不限" },
  { value: 0, label: "否" },
  { value: 1, label: "是" },
]);
const { unit } = proxy.useUnit();
const { jclbList } = proxy.useJclb();
const contentList = ref([]);
const route = useRoute();
const total = ref(0);
const loading = ref(false)
const data = reactive({
  form: {
    contract: {},
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    jclbId: -1,
    isPackage: -1,
  },
});
const { queryParams, form } = toRefs(data);
const props = defineProps({
  projectId: {
    type: String, //参数类型
  },
  isdisabel: {
    type: Boolean, //参数类型
  },
});

watch(
  () => props.projectId,
  (val) => {
    if (val) {
      queryParams.value.projectId = val;
      getProjectForm(val).then((res) => {
        form.value = res.data;
        form.value.time = [];
        form.value.time[0] = form.value.planDate;
        form.value.time[1] = form.value.endTime || form.value.planDate;
        form.value.xstks = form.value.xstk ? form.value.xstk.split(",") : [];
      });
    }
  },
  { deep: true, immediate: true }
);

function timeSave() {
  let planDate = form.value.time[0];
  let endTime = form.value.time[1];
  let nextDay = planDate.split("-");
  addEiditProject({
    projectId: props.projectId,
    planDate: nextDay[0] + "年" + nextDay[1] + "月" + nextDay[2] + "日",
    endTime: endTime,
  }).then((res) => {
    proxy.$modal.msgSuccess(res.msg);
  });
}

function handeleQuery() {
  if (!queryParams.value.projectId) return;
  loading.value = true
  getProjectJcxmList(queryParams.value).then((res) => {
    loading.value = false
    contentList.value = res.rows;
    total.value = res.total;
  });
}

defineExpose({
  getTableHeight,
});

const heightParams = ref([
  { tableName: "main", bottomHeight: 150 },
]);
function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}
onUpdated(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});

const getProjectCodeList = ref([]);
function methodCodeClick(row) {
  listRightPackage1({
    jclbId: row.projectPoint.jclbId,
    jcxmId: row.methodJcxm.jcxmId,
  }).then((res) => {
    getProjectCodeList.value = res.data;
  });
}

function saveJk(row, index) {
  let temp = [
    {
      pJId: row.pJId,
      mJId: contentList.value[index].methodJcxm.mJId,
      methodId: contentList.value[index].methodJcxm.methodId,
      pjUnit: row.pjUnit,
      pjUpLimit: row.pjUpLimit,
      pjDownLimit: row.pjDownLimit,
    },
  ];
  addProjectJcxmList(temp).then((res) => {
    proxy.$modal.msgSuccess(res.msg);
  });
}

function methodCodeChange(row, index, char) {
  if (char) {
    contentList.value[index].methodJcxm.mJId = row.methodJcxm.methodCode;
    let item = proxy.getItemObjectByArray(
      getProjectCodeList.value,
      "mJId",
      row.methodJcxm.methodCode
    );
    contentList.value[index].methodJcxm.methodName = item.methodName;
    contentList.value[index].methodJcxm.methodId = item.methodId;
  }
  saveJk(row, index);
}

function save() {
  var temp = [];
  contentList.value.forEach((item, index) => {
    temp[index] = {
      pJId: item.pJId,
      mJId: item.methodJcxm.mJId,
      pjUnit: item.pjUnit,
      pjUpLimit: item.pjUpLimit,
      pjDownLimit: item.pjDownLimit,
    };
  });
  addProjectJcxmList(temp).then((res) => {
    proxy.$modal.msgSuccess(res.msg);
  });
}

function resetQuery() {
  let projectId = queryParams.value.projectId;
  proxy.resetForm("queryRef");
  queryParams.value.projectId = projectId;
  handeleQuery();
}

const signForm = ref({});

nextTick(() => {
  if (route.query.taskId) {
    getCurrentTime().then((res) => {
      signForm.value.approveDate = res.data;
    });
  }
});

function handleSign() {
  getSign().then((res) => {
    signForm.value.approveSign = res.data;
  });
}

handeleQuery();
</script>

<style scoped>
.formitem1 :deep(.el-form-item__content) {
  height: 32px !important;
}
</style>
